<template>
  <a-modal
    title='告警链详情'
    :width='1000'
    :visible='visible'

    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }"
  >
<!--    :confirmLoading='loading'-->
    <business-layout title='历史数据' custom-title>
      <div style='height: 100%;'>
        <div style='height: 100%;'>
          <div style='height: 10%'>
            <a-row>
              <a-form :form='form' layout='inline' @submit='handleQueryData'>
                <a-form-item>
                  <a-select style='width: 140px;' allowClear placeholder='请选择' @change='' v-decorator="['deviceId']"
                            :options='selectList'>
                  </a-select>
                </a-form-item>
                <a-form-item label=''>
                  <a-date-picker showTime allowClear v-decorator="['startTime' ]" valueFormat='YYYY-MM-DD HH:mm:ss' />
                </a-form-item>
                <a-form-item label=''>
                  <a-date-picker showTime allowClear v-decorator="['endTime']" valueFormat='YYYY-MM-DD HH:mm:ss' />
                </a-form-item>
                <a-form-item>
                  <a-button type='primary' html-type='submit'>
                    <a-icon type='search' />
                    查询
                  </a-button>
                </a-form-item>
              </a-form>
            </a-row>
          </div>
          <div style='height: 300px'>
            <line-chart
              v-show='xData.length'
              :loading='chartloading'
              height='100%'
              width='100%'
              :id='"line-person-env"'
              :x-data='xData'
              :y-data='yData'
            />
<!-- :unit='unit'
              :legendList='legendList'-->
            <a-empty style='height: 100%' v-show='!xData.length'></a-empty>
          </div>
        </div>
      </div>
    </business-layout>

  </a-modal>
</template>

<script>
import { Ellipsis, STable } from '@/components'
import { LineChart } from '@/business-components/charts'
import { getAllReliablilityDevice, singleDeviceAbnormalGraphData } from '@/api/customReport'

let id = 0

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    DatadeviceId:{
      type: String,
      default:()=>null
    },
    activeKey:{
      type:Number,
      default:()=>null
    }
  },
  components: {
    LineChart,
    STable, Ellipsis,
  },
  watch: {
    DatadeviceId(val) {
      if (val) {
        this.form.setFieldsValue({
          deviceId: val
        })
        this.handleQueryData()
      }
    }
  },
  data() {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 21 }
      }
    }
    return {
      form: this.$form.createForm(this),
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      selectList:[],
      tabs: [],
      chartloading: false,
      yData: [],
      xData: [],
    }
  },
  created() {
      this. getAllReliablilityDevice()
  },
  mounted() {
  },
  methods: {
    getAllReliablilityDevice() {
      getAllReliablilityDevice().then(res => {
        this.selectList = res.map(item => {
          return {
            ...item,
            key: item.deviceId,
            label: item.deviceName
          }
        })
        this.form.setFieldsValue({
          'deviceId': this.selectList[0].key
        })
        this.handleQueryData()
      })
    },
    handleQueryData(e) {
      e.preventDefault()
      this.chartloading = true
      const form = this.form
      const that = this
      const values = this.form.getFieldsValue(['deviceId', 'startTime', 'endTime'])
      values.deviceId=this.DatadeviceId
        singleDeviceAbnormalGraphData({...values }).then(res=>{
          this.chartloading = false
          const { dataItems, unit } = res
          this.unit = unit
          if (dataItems) {
            // that.yData = [
            //   dataItems.map(item => item.avgInterval ? Number(item.avgInterval).toFixed(2) : 0),
            //   dataItems.map(item => item.avgProbability ? Number(item.avgProbability).toFixed(2) : 0),
            //   dataItems.map(item => item.avgReliability ? Number(item.avgReliability).toFixed(2) : 0),
            //   dataItems.map(item => item.avgTime ? Number(item.avgTime).toFixed(2) : 0)
            // ]
            that.yData = dataItems.map(item=> item.dataValue)
            that.xData = dataItems.map(item => item.estimateTime)
          } else {
            that.yData = []
            that.xData = []
          }
        })
    }
  },
  beforeDestroy() {
    this.form.resetFields()
    this.xData=[]
    this.yData=[]
  }
}
</script>
